<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>add</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
</head>
<body style="margin: 50px 50px 0 0">
<form id="testForm" class="layui-form" action="" lay-filter="testForm">
    <div class="layui-form-item">
        <label class="layui-form-label">car_id</label>
        <div class="layui-input-block">
            <input type="text" name="car_id" autocomplete="off" placeholder="请输入car_id" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">phone</label>
        <div class="layui-input-block">
            <input type="text" name="phone" autocomplete="off" placeholder="请输入phone" class="layui-input">
        </div>
    </div>

<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">password</label>-->
<!--        <div class="layui-input-block">-->
<!--            <input type="text" name="password" lay-filter="pass" autocomplete="off" placeholder="请输入password"-->
<!--                   class="layui-input">-->
<!--        </div>-->
<!--    </div>-->

<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">role</label>-->
<!--        <div class="layui-input-block">-->
<!--            <select name="role" lay-filter="role">-->
<!--                <option value=""></option>-->
<!--                <option value="Admin">Admin</option>-->
<!--                <option value="SystemUser">SystemUser</option>-->
<!--                <option value="User">User</option>-->
<!--            </select>-->
<!--        </div>-->
<!--    </div>-->

<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">status</label>-->
<!--        <div class="layui-input-block">-->
<!--            <select name="status" lay-filter="status">-->
<!--                <option value=""></option>-->
<!--                <option value="0">0</option>-->
<!--                <option value="1">1</option>-->
<!--            </select>-->
<!--        </div>-->
<!--    </div>-->

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-normal" id="addBtn">赋值</button>
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="form-submit">Form提交</button>
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="tab-submit">Tab提交</button>
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="test-submit">Test提交</button>
        </div>
    </div>
</form>

<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer;

        //自定义验证规则
        form.verify({
            pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
        });

        //监听提交
        form.on('submit(form-submit)', function (data) {
            var tabName = 't_user'
            // var dataSet = ((data.field))
            var dataSet = serializeArray(data.field)

            $.ajax({
                type: "GET",
                url: "http://localhost:9999/saveForm/QUE001000",
                async: false,
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                data: {dataSet: (dataSet)},
                success: function (res) {
                    console.log("[success]:" + res.code, res.msg)
                    // var objs=eval(res); // 解析json对象
                    // console.log("[数据]:"+objs);
                    // layer.msg('保存成功'
                    //     ,{icon: 1,time: 2000}
                    //     , function () {
                    //         // window.parent.location.reload();
                    //         var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    //         console.log(index)
                    //         parent.layjpaer.close(layer.index); //再执行关闭
                    //     });
                    if (res.code == '200') {
                        layer.msg("添加成功！");
                        layer.alert("添加成功！", function () {
                            window.parent.location.reload();//刷新父页面
                            parent.layer.close(index);//关闭弹出层
                        });
                        // layer.close(layer.index);
                        // window.parent.location.reload();
                    } else if (res.code == '300') {
                        alert("添加失败！" + res.msg);
                    }
                },
                error: function (err) {
                    console.log(err)
                    alert("网络连接失败,稍后重试！" + err);
                }
            });
        });

        form.on('submit(tab-submit)', function (data) {
            var tabName = 't_user'
            // var dataSet = ((data.field))
            var dataSet = ((data.field))

            $.ajax({
                type: "GET",
                url: "http://localhost:9999/saveTab/QUE001000",
                async: false,
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                data: {dataSet: JSON.stringify(dataSet)},
                success: function (res) {
                    console.log("[success]:" + res.code, res.msg)
                    if (res.code == '200') {
                        layer.msg("添加成功！");
                        layer.alert("添加成功！", function () {
                            window.parent.location.reload();//刷新父页面
                            parent.layer.close(index);//关闭弹出层
                        });
                    } else if (res.code == '300') {
                        alert("添加失败！" + res.msg);
                    }
                },
                error: function (err) {
                    console.log(err)
                    alert("网络连接失败,稍后重试！" + err);
                }
            });
        });

        form.on('submit(test-submit)', function (data) {
            var tabName = 't_user'
            // var dataSet = ((data.field))
            var dataSet = serializeArray(data.field)
            // var dataSet = ((data.field))

            $.ajax({
                type: "GET",
                url: "http://localhost:9999/CURDtest",
                async: false,
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                data: {dataSet: (dataSet)},
                success: function (res) {
                    console.log("[success]:" + res.code, res.msg)
                    if (res.code == '200') {
                        layer.msg("添加成功！");
                        layer.alert("添加成功！", function () {
                            window.parent.location.reload();//刷新父页面
                            parent.layer.close(index);//关闭弹出层
                        });
                    } else if (res.code == '300') {
                        alert("添加失败！" + res.msg);
                    }
                },
                error: function (err) {
                    console.log(err)
                    alert("网络连接失败,稍后重试！0" + err);
                }
            });
        });

        //表单赋值
        layui.$('#addBtn').on('click', function () {
            form.val('testForm', {
                "car_id": "1"
                , "phone": "13500000000"
            });
        });
    });

    function serializeArray(values) {
        var vs = '['
        for (var key in values) {
            vs += "{\"name\":\"" + key + "\",\"value\":\"" + values[key] + "\"},"
        }
        vs = vs.substr(0, vs.length - 1);
        vs += ']'
        JSON.parse(vs)
        return vs
    };

    function length(json) {
        var jsonLength = 0;
        for (var i in json) {
            jsonLength++;
        }
        return jsonLength;
    };
</script>
</body>
</html>